<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>糖尿病风险评估</title>
    <!-- 引入 vant UI 组件库样式文件 -->
    <link rel="stylesheet" href="../../../common/css/vant-index.css" />
    <style rel="stylesheet">
        body {
            background-color: #f7f8fa;
        }

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        a:-webkit-any-link {
            color: #eee;
        }

        .container {
            border: 1px solid #f5f5f5;
            box-shadow: -1px 5px 5px #ececec;
            border-radius: 10px;
            margin: 0.6rem;
            padding: 0;
        }

        .van-cell__title {
            flex: 2;
        }

        #lists {
            margin-top: 0.2rem;
            font-size: 1rem;
            font-weight: 350;
            color: #8c8b8c;
            text-align: left;
        }

        .van-cell-group--inset {
            margin: 0;
        }

        .tab-btn {
            margin: 0.2rem;
            height: 1.7rem;
            line-height: 1.7rem;
        }

        #tabs-title {
            background-color: #11428c;
            display: flex;
        }

        #left-btn {
            flex: 1;
        }

        #right-btn {
            margin-right: 0.5rem;
        }


        .evalution_value {
            height: 3rem;
            width: 100%;
            background-color: #E22E30;
            text-align: center;
            line-height: 3rem;
            bottom: 0;
            margin-top: 3rem;
            margin-bottom: 0.5rem;
        }

        .van-button::before {
            background-color: red;
        }

        .evalution_button {
            margin: 0.2rem 0.2rem;
        }

        .evalution_button_list {
            margin: 0.2rem 0.2rem;
            width: 45%;
        }

        .bgcolor {
            background-color: #E22E30;
            color: #fff;
        }
		
		.bgcolorred {
		    background-color: #E22E30;
		    color: #fff;
		}
		.bgcolorblue {
		    background-color: #005BAC;
		    color: #fff;
		}
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar v-if='from!="weapp"' title="糖尿病风险评估" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div class="container" :class="from=='weapp'?'padding-bottom':''">
            <span>1.你的性别？</span>
            <div class="evalution_button">
                <van-button round class="evalution_button_list" :class="statisticsPeriod==1?(from=='weapp'?'bgcolorblue':'bgcolorred'):''"
                    @click="this.diabetes.gender='1',getButtonChange(1)">男
                </van-button>
                <van-button round class="evalution_button_list" :class="statisticsPeriod==2?(from=='weapp'?'bgcolorblue':'bgcolorred'):''"
                    @click="this.diabetes.gender='2',getButtonChange(2)">女
                </van-button>

            </div>
            <span>2.你的年龄？</span>
            <div class="evalution_button">
                <van-cell is-link @click="showPopup">
                    <span class="columnsValue">{{columnsValue}}</span>
                </van-cell>
                <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">

                    <van-datetime-picker v-model="diabetes.birth" type="date" title="选择出生日期" :min-date="minDate"
                        :max-date="maxDate" :formatter="formatter" :default-index="0" @cancel="show = false"
                        @confirm="onConfirm" />
                </van-popup>

            </div>
            <span>3.你的身高（cm）？
            </span>
            <div class="evalution_button">
                <van-cell-group>
                    <van-field v-model="diabetes.height" :maxlength="3" type="number" placeholder="请输入身高" />
                </van-cell-group>

            </div>
            <span>4.你的体重（kg）？

            </span>
            <div class="evalution_button">
                <van-cell-group>
                    <van-field v-model="diabetes.weight" :maxlength="3" type="number" placeholder="请输入体重" />
                </van-cell-group>

            </div>
            <span>5.你的腰围（cm）？</span>
            <div class="evalution_button">
                <van-cell-group>
                    <van-field v-model="diabetes.waistline" :maxlength="3" type="number" placeholder="请输入腰围" />
                </van-cell-group>

            </div>
            <span>6.你的收缩压（mmHg）？</span>
            <div class="evalution_button">
                <van-cell-group>
                    <van-field v-model="diabetes.pressureSystolic" :maxlength="3" type="number" placeholder="请输入收缩压" />
                </van-cell-group>

            </div>
            <span> 7.是否有糖尿病家族史（父母，兄弟姐妹，子女）？</span>
            <div class="evalution_button">
                <van-button round class="evalution_button_list" :class="statisticsPeriod6==1?(from=='weapp'?'bgcolorblue':'bgcolorred'):''"
                    @click="this.diabetes.diabetesFamily='1',getButtonChange6(1)">有
                </van-button>
                <van-button round class="evalution_button_list" :class="statisticsPeriod6==2?(from=='weapp'?'bgcolorblue':'bgcolorred'):''"
                    @click="this.diabetes.diabetesFamily='2',getButtonChange6(2)">无
                </van-button>

            </div>


            <div class="evalution_value" @click="postDiabetes" v-if="status==true&&from==''">
                <span style="color: #f3f3f3;">提交问卷</span>
            </div>
			<div class="evalution_value" style="background-color: #005BAC;" @click="postDiabetes" v-if="status==true&&from=='weapp'">
			    <span style="color: #f3f3f3;">提交问卷</span>
			</div>

        </div>
    </div>
</body>
<!-- 上线环境用 -->
<script src="../../../common/js/vue.global.prod.js"></script>
<!-- 引入 UI 组件库 -->
<script src="../../../common/js/vant.min.js"></script>
<!-- axios 接口调用 -->
<script src="../../../common/js/axios.min.js"></script>
<script src="../../../base.js"></script>
<script src="../../../common/js/url.min.js"></script>


<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../../common/js/api/vue3-axios-utils.js";
    const PatientData = {
        data() {
            return {
                url: {
                    postDiabetes: "/105/26/1052601",
                    getDiabetesInfo: "/105/26/1052602",

                },
                status: true,
                show: false,
                columnsValue: '选择出生日期',
                diabetes: {
                    gender: '',
                    diabetesFamily: '',
                    height: '',
                    birth: new Date(),
                    pressureSystolic: '',
                    waistline: '',
                    weight: '',
                },

                currentData: {},
                statisticsPeriod: null,
                statisticsPeriod1: null,
                statisticsPeriod2: null,
                statisticsPeriod3: null,
                statisticsPeriod4: null,
                statisticsPeriod5: null,
                statisticsPeriod6: null,
                minDate: new Date(1920, 0, 1),
                maxDate: new Date(),
                currentDate: new Date(),
				patientId:'',
				from:''

            };
        },


        methods: {
            onConfirm(value, index) {

                var d = new Date(value);
                var y = d.getFullYear()
                var m = d.getMonth() + 1
                var d1 = d.getDate()
                m = m < 10 ? ('0' + m) : m
                d1 = d1 < 10 ? ('0' + d1) : d1
                const time = y + '-' + m + '-' + d1;
                this.date = time
                const timevalue = y + '-' + m + '-' + d1;
                this.columnsValue = timevalue
                console.log(time);
                this.show = false
            },
            showPopup() {
                this.show = true
            },
            formatter(type, val) {
                if (type === 'year') {
                    return `${val}年`;
                } else if (type === 'month') {
                    return `${val}月`;
                }
                return val;
            },
            getButtonChange(value) {
                this.statisticsPeriod = value;
            },
            getButtonChange1(value) {
                this.statisticsPeriod1 = value;
            },
            getButtonChange2(value) {
                this.statisticsPeriod2 = value;
            },
            getButtonChange3(value) {
                this.statisticsPeriod3 = value;
            },
            getButtonChange4(value) {
                this.statisticsPeriod4 = value;
            },
            getButtonChange5(value) {
                this.statisticsPeriod5 = value;
            },
            getButtonChange6(value) {
                this.statisticsPeriod6 = value;
            },


            getPatientId() {
                let patientId = this.patientId
            },

            async postDiabetes() {

                // let inputs = [];
                // for (let i in this.diabetes) {
                //     inputs.push(this.diabetes[i]);

                // }
                // for (let k in diabetes) {
                //     if (diabetes[k] == '') {
                //         vant.Toast.fail('请填写所有选项!');
                //     }
                //     break
                // }

                let url =
                    getUrl() + this.url.postDiabetes;
				let patientId = this.patientId
                let params = {
                    // 患者 ID 从本地存储空间的 pid 获得
                    patientId: patientId,
                    gender: this.diabetes.gender,
                    diabetesFamily: this.diabetes.diabetesFamily,
                    height: this.diabetes.height,
                    birth: this.columnsValue,
                    pressureSystolic: this.diabetes.pressureSystolic,
                    waistline: this.diabetes.waistline,
                    weight: this.diabetes.weight,

                };
                const res = await postAction(url, params);
                if (res.data.success) {
                    vant.Toast.success('3秒后查看结果');
                    // 定时跳转
					if(this.from){
						setTimeout("javascript:history.go( -1 )", 3000);
					}else{
						setTimeout("javascript:location.href='./DiabetesInfo.html'", 3000);
					}
                    
                }
            },
            onClickLeft() {
                window.location.href = './diabetesInfo.html'
            },
            onClickRight() {
                window.location.href = '../../index.html?userid=' + localStorage.pid
            },

        },
        created() {
			if(url('?from')=='weapp'){
				this.from = 'weapp'
			}
			if(url('?pid')){
				this.patientId = url('?pid')
			}else{
				this.patientId = localStorage.pid;
			}
            var status = window.location.search.slice(8,9)
            if (status == 1) {
                let patientId= this.patientId
                let params = {
                    patientId: patientId
                }

                let url =
                    getUrl() + this.url.getDiabetesInfo;
                getAction(url, params).then((res) => {
                    this.statisticsPeriod = res.data.result.gender
                    this.statisticsPeriod6 = res.data.result.diabetesFamily
                    this.diabetes.height = res.data.result.height
                    this.columnsValue = res.data.result.birth
                    this.diabetes.pressureSystolic = res.data.result.pressureSystolic
                    this.diabetes.waistline = res.data.result.waistline
                    this.diabetes.weight = res.data.result.weight
                    this.status = false
                })
            }
            this.getPatientId()
        },

    };

    const app = Vue.createApp(PatientData);

    app.use(vant);
    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    app.use(vant.Lazyload);

    // 调用函数组件，弹出一个 Toast
    // vant.Toast("刷新成功");
    app.mount("#app");
</script>

</html>